<template>
  <div class="detail-page">
    <div class="detail-container">
      <!-- 商品图片 -->
      <el-image
        class="product-image"
        :src="itemData.image"
        :preview-src-list="[itemData.image]"
        fit="contain"
      ></el-image>

      <!-- 商品信息 -->
      <div class="product-info-card">
        <h2 class="product-title">{{ itemData.sellPoint }}</h2>
        <el-descriptions :column="1" border>
          <el-descriptions-item
            label="价格"
            :label-style="labelStyle"
            :content-style="rowStyle_price"
          >
            ¥{{ itemData.price }}
          </el-descriptions-item>
          <el-descriptions-item
            label="配送地址"
            :label-style="labelStyle"
            :content-style="rowStyle"
          >
            {{ address }}
          </el-descriptions-item>
          <el-descriptions-item
            label="库存"
            :label-style="labelStyle"
            :content-style="rowStyle"
          >
            {{ itemData.stock }}
          </el-descriptions-item>
          <el-descriptions-item
            label="承诺"
            :label-style="labelStyle"
            :content-style="rowStyle"
          >
            七天无理由，包邮
          </el-descriptions-item>
          <el-descriptions-item
            label="购买数量"
            :label-style="labelStyle"
            :content-style="rowStyle"
          >
            <el-input-number v-model="num" :min="1" @change="handleChange" />
          </el-descriptions-item>
        </el-descriptions>
        <!-- 操作栏 -->
        <div class="action-bar">
          <el-row>
            <el-col :span="12" align="center">
              <el-button
                icon="el-icon-s-goods"
                class="action-button"
                @click="addCart"
                >加入购物车</el-button
              >
            </el-col>
            <el-col :span="12" align="center">
              <el-button
                icon="el-icon-check"
                type="danger"
                class="action-button"
                @click="buy"
                >立即购买</el-button
              >
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <!-- 商品详情 -->
    <div class="price-info">
      <div class="container">
        <h2>商品详情</h2>
        <div class="desc" v-html="proUrl"></div>
      </div>
    </div>
  </div>
</template>

<script>
import router from "@/router";
import request from "@/utils/request";
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  name: "Detail",
  created() {
    const id = this.$route.query.id;
    this.loadData(id);
    const str = sessionStorage.getItem("user") || "{}";
    this.user = JSON.parse(str);
    this.loadAddress();
  },
  computed: {
    ...mapGetters("user", ["isLogin", "user"]),
  },
  data() {
    return {
      address: "",
      proUrl: "",
      user: {},
      itemData: {},
      num: 1,
      rowStyle: {
        textAlign: "center",
        fontSize: "15px",
        background: "#fffde7",
        height: "60px",
      },
      labelStyle: {
        textAlign: "center",
        fontSize: "15px",
        background: "#e8f5e9",
      },
      rowStyle_price: {
        textAlign: "center",
        fontSize: "24px",
        background: "#fff0f0",
        color: "#d32f2f",
        height: "60px",
      },
    };
  },
  methods: {
    loadData(id) {
      request.get("/item/one", { params: { id } }).then((res) => {
        this.itemData = res.data;
        document.title = this.itemData.title;
      });

      request.get("/itemDetail", { params: { id } }).then((res) => {
        this.proUrl = res.data.itemDetail;
      });
    },
    loadAddress() {
      request
        .get("/address/one", { params: { userId: this.user.id } })
        .then((res) => {
          this.address = res.data;
        });
    },
    handleChange() {},
    addCart() {
      this.$confirm("是否确定加入购物车?", "提示", {
        confirmButtonText: "Yes",
        cancelButtonText: "No",
        type: "warning",
      })
        .then(() => {
          request
            .get("/order/add", {
              params: {
                itemId: this.itemData.id,
                userId: this.user.id,
                count: this.num,
              },
            })
            .then(() => {
              this.$message.success("加入购物车成功");
            });
        })
        .catch(() => {
          this.$message.error("取消加入购物车");
        });
    },
    buy() {
      if (!this.isLogin) {
        this.$message.error("你还没有登录请登录");
        setTimeout(() => {
          this.$router.push("/login");
        }, 500);
        return;
      }
      request
        .get("/order/buy", {
          params: {
            itemId: this.itemData.id,
            userId: this.user.id,
            count: this.num,
          },
        })
        .then(() => {
          this.$message.success("支付成功！");
          alert("即将进入支付页面，请注意支付环境安全");
          // window.open("/Success.html", "_blank");
          // window.location.href = window.location.href;
          setTimeout(() => {
            this.$router.push("/myOrder");
          }, 1000);
        });
    },
  },
};
</script>

<style scoped>
.detail-page {
  background-color: #ffffff;
  margin: 20px auto;
  max-width: 1200px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
}

.detail-container {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
}

.product-image {
  width: 400px;
  height: 407px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-info-card {
  flex: 1;
  min-width: 300px;
}

.product-title {
  margin: 20px 0;
  font-size: 22px;
  font-weight: bold;
  color: #333;
}

.action-bar {
  margin: 40px 0;
  padding: 20px 40px;
  background-color: #fff7e6;
  border-radius: 10px;
}

.action-button {
  height: 60px;
  width: 180px;
  font-size: 20px;
  border-radius: 8px;
  color: #fff;
  background-color: #ff4400;
  border: none;
}

.action-button:hover {
  background-color: #e63e00;
}

.price-info {
  text-align: center;
  margin-top: 60px;
  padding: 30px;
  background-color: #fafafa;
  border-radius: 10px;
}

.price-info h2 {
  font-size: 24px;
  color: #d71d3f;
  margin-bottom: 20px;
  border-bottom: 2px solid coral;
  display: inline-block;
  padding-bottom: 10px;
}
</style>
